<!-- 登录 组件 -->
<template>
  <div>
    <header  class="mui-bar mui-bar-nav bg-color">
      <span class="iconfont icon-fanhui header_fanhui" @tap="goLogin"></span> 
      <span class="mui-icon mui-icon-search mui-pull-left header_search" style="display: none;"></span> 
      <h1  class="mui-title">注册新用户</h1> 
      <h1  class="mui-title"></h1> 
      <span  class="mui-icon  icon-icon-- search-right" style="display: none;"></span>
    </header>
    <div class="login"> 
      <!-- 横线分隔条 -->
      <cross-line></cross-line>
      <!-- 注册 -->
      <mt-tab-container-item  class="register-wrapper">
        <form id="register_form" @submit.prevent="handleRegister">
          <mt-field label="手机号" placeholder="请输入手机号"  :attr="{ maxlength: 20, name:'register_mobile'}" v-model="register_mobile" :state="validated_status.register_mobile"></mt-field>
          <mt-field label="验证码" placeholder="请输入验证码"  :attr="{ maxlength: 20, name:'register_mobile_code'}" type="text" v-model="register_mobile_code">
            <mt-button v-bind:disabled="but_dis" style="margin-top:0px" type="primary" size="small" @click.prevent="handleSendMobileCode">{{get_mobile_code}}</mt-button>
          </mt-field>
          <mt-field label="密码" placeholder="请输入密码" type="password" :attr="{ maxlength: 20, name:'register_password1', autocomplete:'off' }" v-model="register_password1" :state="validated_status.register_password1" ></mt-field>
          <mt-field label="确认密码" placeholder="请确认密码" type="password" :attr="{ maxlength: 20, name:'register_password2', autocomplete:'off'  }" v-model="register_password2" :state="validated_status.register_password2"></mt-field>
          <mt-field label="推荐码" placeholder="推荐码，选填" type="text" :attr="{ maxlength: 20, name:'register_referral_code'  }" v-model="register_referral_code" :state="validated_status.register_referral_code"></mt-field>
          <!-- 横线分隔条 -->
          <cross-line></cross-line>
        <cross-line></cross-line>
          <mt-button type="primary" size="large" style="height:40px; border-radius: 0px!important;">注册</mt-button>
        </form>
      </mt-tab-container-item>
    </div>
    <div style="text-align:center;width:100%;margin-top:20px;color:#FF6A27;font-size:15px;" @tap="goBindPhone">已有账号，去绑定 ></div>
  </div>
</template>

<script>
import { login, getInfo, logout, register ,sendMobileCode, saveWXInfo} from '@/api/user'
import { validated, validatedPhone, validatedError }from '@/utils/validator'
import CrossLine from '@/components/base/cross-line/cross-line'
import { Indicator,Toast } from 'mint-ui'
import mui from 'static/js/mui'
import md5 from 'js-md5'
import storage from '@/utils/localstorage'
import { mapState } from 'vuex'
import { setToken } from '@/utils/auth'
//prevent用来阻止原生事件，去掉会有惊喜！
export default {
  components: { CrossLine },
  data () {
    return {
      selected: '1',
      login_mobile: '',
      login_password: '',
      register_mobile: '',
      register_mobile_code: '',
      register_password1: '',
      register_password2: '',
      register_referral_code: '',
      get_mobile_code:'获取验证码',
      but_dis:false,
      code_time: 60,
      validated_status: {
  
        'register_mobile':null,
        'register_password1':null,
        'register_password2':null,
        'register_referral_code':null
      },    
      register_option:[
        {
          name: 'register_mobile',
          display:"你输入的不是合法手机号|手机号必填|手机号太长|手机号太短",
          rules: 'is_phone|required|max_length(20)|min_length(2)'
        },
        {
          name: 'register_password1',
          display:"密码必填|密码太长|密码太短",
          rules: 'required|max_length(12)|min_length(6)'
        },
        {
          name: 'register_password2',
          display:"确认密码必填|输入的两次密码不一致",
          rules: 'required|same(register_password1)'
        },
        {
          name: 'register_referral_code',
          display:"输入的不是数字",
          regexp_num:'/^[0-9]+$/',
          rules: 'regexp_num'
        }
      ]
    }
  },
  props: {},
  watch: {},
  methods: {
    goLogin(){
       this.$router.push({
        path: "/login"
       })
    },
    goBindPhone() {
      this.$router.push({
        path: "/bindPhone"
       })
    },
    handleSendMobileCode() {
      if(validatedPhone(this.register_mobile)) {
        //处理按钮60s封闭
        this.settime()
        //加入loading效果
        Indicator.open('加载中...');
       // app.Vwaiting()
        //发送 
        sendMobileCode(this.register_mobile).then(response => {
          //去除状态
          this.validated_status.tel = null
          //去除loading效果
          Indicator.close();
          //console.log(response.msg)
        })
      }else{
        Toast("你输入的不是合法手机号")
      }
      this.validated_status.register_mobile ='error'
      return false
    },
    settime(){
      if (this.code_time == 0) { 
        this.but_dis = false  
        this.get_mobile_code="获取验证码"
        this.code_time = 60
        return 
      } 
      else {
        this.but_dis = true 
        this.get_mobile_code="重发(" + this.code_time + ")"; 
        this.code_time--; 
      } 
      //定义下that变量，防止this被替换
      let that = this
      setTimeout(function() { 
        that.settime() 
      },1000)
    },
    handleRegister () {
      //验证处理,返回错误信息
      var errors = validated('register_form',this.register_option)
      //根据错误生成input状态
      validatedError(errors ,this.validated_status)
      if(errors.length == 0){
        Indicator.open('加载中...');
        //进行MD5密码
        let register_password1 = md5(this.register_password1)
        register(this.register_mobile, register_password1, this.register_mobile_code).then(response => {
          this.register_password1 = ''
          //保存token
          setToken('token', response.data.token)
          this.$store.commit('SET_TOKEN', response.data.token)
          //保存用户信息
          saveWXInfo(this.user.wxUserCache).then(res=>{
            this.$store.commit('SET_USER', res.data.user)
            storage.setLocalstorage('user',res.data.user)
            Indicator.close();
            this.$router.push({ path: '/' })
          })
          Toast('绑定成功')
          Indicator.close();
          var that=this;//解决闭包
          mui.alert('注册成功', '提示', ['确定'],function() {
              that.$router.push('home')
          },'div');
        }).catch(() => {
          Indicator.close();
        })
      }else{
        Indicator.close();
      }
    }
  },
  filters: {},
  computed:{
    ...mapState([
        'user',
    ])
  },
  created () {
  },
  mounted () {
    //关闭注册界面有token
    //this.token = this.$store.getters.token
  }
}
</script>

<style lang="scss" >
@import '~@/assets/scss/const.scss';
@import '~@/assets/scss/mixin.scss';

.login {
  color: #333;
  margin-top: 44px;
  background-color: #fff;
  overflow: visible;
  .login-wrapper {
    margin-top: 0px!important;
    overflow: hidden;
    .mint-button {
      margin-top: 30px;
    }
  }
  .register-wrapper {
    margin-top: 0px!important;
    overflow: hidden;
    .mint-button {
      margin-top: 30px;
    }
  }
  .mint-cell-value .mint-field-core{
    line-height: 21px;
    width: 100%;
    height: 40px;
    margin-bottom:0px;
    padding: 10px 15px;
    -webkit-user-select: text;
    border:none
  }
  .forget_passwword{
    float:right;
    padding:5px;
    padding-right:12px;
  }
}
.mui-popup-button {
    color: #ff6a27;
}
.mint-tab-item-label{
  font-size:15px;
}
.mint-button{
  font-size:15px;
}
.mint-cell-wrapper{
  font-size:15px;
  background-image: -webkit-linear-gradient(top, #d9d9d9, #d9d9d9 50%, transparent 50%);
  background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
}
.mint-button--small{
  font-size:13px;
}
.mint-tab-container{
}
.login .register-wrapper .mint-button {
  margin-top:0px;
}
.mint-tab-container {
  position: relative;
  z-index:5;
}
.mint-tab-container-wrap{
  position: relative;
  z-index:1;
}
.mint-navbar{
  height:40px;
}
.mint-tab-item-label{
  position: relative;
  top:-5px;
}
.login .login-wrapper{
  margin-top:0px;
}
.login .login-wrapper .mint-button{
  margin-top:0px;
}
.mint-navbar .mint-tab-item {
    border-bottom: 1.5px solid #e9e9e9!important;
    margin-bottom: -1.5px;
}
.mint-navbar .mint-tab-item.is-selected {
    border-bottom: 1.5px solid #ff6a27!important;
    color: #ff6a27!important;
    margin-bottom: -1.5px;
}

.mui-bar{
    border-bottom: 1px solid #ddd;
    box-shadow: 0 0px 0px !important;
}
.mui-bar-tab {
    border-bottom: 1px solid #ddd;
}
.mui-bar-tab .mui-tab-item {
    height:60px;
}
.mint-tab-item-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 5px
}
.header_fanhui {
  line-height: 43px;
  font-size: 0.9rem;
  width: 43px;
}
.login_footer{
  position:fixed;
  bottom:50px;
  width:80%;
  margin-left: 10%; 
}
.xian{
  display:inline-block;
  border-bottom:1px solid #ccc;
  width:31%;
  position:relative;
  top:-3px;
}
.xian_text{
  display:inline-block;
  width:34%;
  text-align: center;
  font-size:12px;
  margin-left:2%;
  margin-right:2%;
  color:#ccc;
}
.xian_img{
  width:30px;
  display: block;
  margin:0 auto;
  margin-top:15px;
}
</style>
